<template>
  <div class="grow-1 flex-col p-20">
    {{ computedURL }}<br/>
    <ElInput v-model="content"></ElInput>
    <vmo-portal-vessel
      v-show="isReady"
      class="grow-1"
      :name="name" 
      :url="computedURL"
      :baseroute="baseroute"
      :keep-alive="keepAlive"
      :data="computedData">
    </vmo-portal-vessel>
  </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, ref, onMounted, computed, nextTick, type PropType, onActivated, onDeactivated } from 'vue';
import { useRouter, useRoute } from "@src/router/use.lib";
import { ElInput } from 'element-plus';
import publicStores from "@src/stores";
import { eventBusHostSendMessageToSub } from '@src/use.lib/microAppEventBusCenter';

export type PageRaw= {
  name:string,
  params?:Record<string,any>,
  query?:Record<string,any>
}

function decodeURIComponentAndJSONParse(stringData:string){
  try{
    return JSON.parse(decodeURIComponent(stringData));
  }catch(err){
    console.warn('sub app pageData parse failure:' + (err as any).toString(),'orgString:'+stringData);
    return {}
  }
}

export default defineComponent({
  name:'micro-embed-pg',
  components:{ ElInput },
  props:{
    name:{
      type:String as PropType<string>,
      required:true,
    },
    keepAlive:{
      type:Boolean as PropType<boolean>,
      default:true,
    },
    baseroute:{
      type:String as PropType<string>,
      default:'',
    },
    route:{
      type:String as PropType<string>,
      default:'//',
    }
    // pageData:{
    //   type:Object as PropType< Partial<{name:string,params:Record<string,any>,query:Record<string,any>}>>,
    //   default:()=>({}),
    // },
  },
  setup(props,context){
    const { proxy } = getCurrentInstance() as { proxy:any }
    const content = ref('');
    const isReady = ref(false)
    const router = useRouter();
    const computedSubRoute = computed(()=>{
      return decodeURIComponentAndJSONParse(props.route);
    });
    const computedURL = computed(()=>{
      return publicStores.useAppStateStore().getSubApps?.[props.name] // 返回注册子应用地址
    })
    const computedData = computed(()=>{
      return {
        token:publicStores.useUserBaseStateStore().getToken,
        info:publicStores.useUserBaseStateStore().getInfo,
      }
    });
    onActivated(()=>{
      // 默认打开页面，一定要用 replace 方式，push 会产生不必要的路由
      eventBusHostSendMessageToSub(props.name,{type:'router',payload:{method:'replace',data:computedSubRoute.value}});
      nextTick(()=>{
        isReady.value = true;
      });
      // console.log(props,computedSubRoute.value);
      // setTimeout(function(){
      //   microApp.setData(props.name, {type:'push',payload:computedSubRoute.value});
      //   console.log(props,computedSubRoute.value);
      // },0);
    });
    onDeactivated(()=>{
      isReady.value = false;
    })
    onMounted(()=>{
      console.log('embed-pg mounted');
      // 默认打开页面，一定要用 replace 方式，push 会产生不必要的路由
      eventBusHostSendMessageToSub(props.name,{type:'router',payload:{method:'replace',data:computedSubRoute.value}});
      setTimeout(function(){
        isReady.value =true
      },3000)
    })
    return {
      content,
      props,
      isReady,
      router,
      computedData,
      computedURL,
      publicStores
    }
  }
})
</script>